'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { ParameterEditorWithPermissions } from '@/components/parameter-editor-with-permissions'
import { useAuth } from '@/hooks/use-auth'
import { ArrowLeft, Info, Users, Settings } from 'lucide-react'

export default function DemoSpecialtyFilterPage() {
  const { user, loading } = useAuth()
  const router = useRouter()

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-2 text-gray-600">加载中...</p>
        </div>
      </div>
    )
  }

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Card className="w-full max-w-md">
          <CardHeader>
            <CardTitle>需要登录</CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-gray-600 mb-4">请先登录以查看专业过滤演示</p>
            <Button onClick={() => router.push('/login')} className="w-full">
              前往登录
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  const getRoleDescription = (roleCode: string) => {
    const descriptions: Record<string, string> = {
      'ADMIN': '系统管理员 - 可以查看和编辑所有专业的字段',
      'PROCUREMENT': '采购人员 - 可以查看所有专业字段，只能编辑采购专业(P)的字段',
      'DESIGN': '设计人员 - 可以查看所有专业字段，只能编辑设计专业(E)的字段',
      'E': '设计人员 - 可以查看所有专业字段，只能编辑设计专业(E)的字段',
      'MONITORING': '监测人员 - 可以查看所有专业字段，只能编辑监测专业(M)的字段',
      'M': '监测人员 - 可以查看所有专业字段，只能编辑监测专业(M)的字段',
      'CONSTRUCTION': '施工人员 - 可以查看所有专业字段，只能编辑施工专业(C)的字段',
      'BUILD': '建设人员 - 可以查看所有专业字段，只能编辑建设专业(O)的字段',
      'O': '建设人员 - 可以查看所有专业字段，只能编辑建设专业(O)的字段',
      'OPERATIONS': '运维人员 - 可以查看所有专业字段，只能编辑运维专业(R)的字段',
      'R': '运维人员 - 可以查看所有专业字段，只能编辑运维专业(R)的字段',
      'VIEWER': '查看人员 - 可以查看所有专业的字段，但都是只读'
    }
    return descriptions[roleCode] || '未知角色'
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 页面头部 */}
        <div className="mb-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button
                variant="outline"
                onClick={() => router.push('/')}
                className="flex items-center space-x-2"
              >
                <ArrowLeft className="h-4 w-4" />
                <span>返回首页</span>
              </Button>
              
              <div>
                <h1 className="text-2xl font-bold text-gray-900">
                  专业过滤功能演示
                </h1>
                <p className="text-gray-600">测试不同角色的专业数据访问权限</p>
              </div>
            </div>

            <div className="flex items-center space-x-2">
              <Button
                variant="outline"
                onClick={() => router.push('/test-permissions')}
              >
                <Settings className="h-4 w-4 mr-2" />
                权限测试
              </Button>
            </div>
          </div>
        </div>

        {/* 功能说明 */}
        <Alert className="mb-6">
          <Info className="h-4 w-4" />
          <AlertDescription>
            <strong>权限模型说明：</strong>
            <br />
            • <strong>查询权限</strong>：所有用户都可以查看所有专业的字段数据
            <br />
            • <strong>编辑权限</strong>：只有对应专业的用户才能编辑对应的字段
            <br />
            • <strong>专业过滤</strong>：通过下拉框切换查看不同专业的字段
            <br />
            • <strong>数据来源</strong>：每个字段显示其数据来源（P、E、M、O、C、R）
            <br />
            • <strong>状态标识</strong>：绿色可编辑、灰色只读、锁定图标表示无编辑权限
          </AlertDescription>
        </Alert>

        {/* 当前角色信息 */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Users className="h-5 w-5" />
              <span>当前角色权限</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <div className="text-sm font-medium text-gray-600">用户信息</div>
                <div className="text-lg font-semibold">{user.full_name}</div>
                <Badge variant="default">{user.role_name}</Badge>
              </div>
              <div className="md:col-span-2">
                <div className="text-sm font-medium text-gray-600">权限说明</div>
                <div className="text-sm text-gray-700 mt-1">
                  {getRoleDescription(user.role_code)}
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 参数编辑器演示 */}
        <ParameterEditorWithPermissions
          tableName="table_c2"
          deviceId={1}
          deviceName="演示设备 - 装车泵"
          onSave={() => {
            console.log('参数保存成功')
          }}
        />

        {/* 测试指南 */}
        <Card className="mt-6">
          <CardHeader>
            <CardTitle>测试指南</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <h4 className="font-medium text-gray-900 mb-2">1. 测试专业过滤</h4>
                <ul className="text-sm text-gray-600 space-y-1 ml-4">
                  <li>• 使用右上角的"专业"下拉框切换显示不同专业</li>
                  <li>• 默认显示当前角色对应的专业（如采购人员默认显示采购专业）</li>
                  <li>• 选择"采购"、"设计"、"制造"、"施工"、"运维"查看对应专业</li>
                  <li>• 选择"全部"查看所有专业的字段</li>
                </ul>
              </div>
              
              <div>
                <h4 className="font-medium text-gray-900 mb-2">2. 测试权限控制</h4>
                <ul className="text-sm text-gray-600 space-y-1 ml-4">
                  <li>• 绿色"可编辑"徽章：当前角色可以编辑的字段</li>
                  <li>• 灰色"只读"徽章：当前角色只能查看的字段</li>
                  <li>• 灰色"无权限"徽章：其他专业的字段，只能查看</li>
                  <li>• 锁定图标：表示字段不可编辑</li>
                </ul>
              </div>
              
              <div>
                <h4 className="font-medium text-gray-900 mb-2">3. 切换角色测试</h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                  <div>
                    <p className="font-medium text-gray-700 mb-1">采购人员 (procurement/proc123):</p>
                    <p className="text-gray-600">只能编辑采购专业(P)的6个字段</p>
                  </div>
                  <div>
                    <p className="font-medium text-gray-700 mb-1">设计人员 (design/design123):</p>
                    <p className="text-gray-600">只能编辑设计专业(E)的2个字段</p>
                  </div>
                  <div>
                    <p className="font-medium text-gray-700 mb-1">施工人员 (construction/const123):</p>
                    <p className="text-gray-600">只能编辑施工专业(C)的2个字段</p>
                  </div>
                  <div>
                    <p className="font-medium text-gray-700 mb-1">管理员 (admin/admin123):</p>
                    <p className="text-gray-600">可以编辑所有专业的字段</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="mt-6 pt-4 border-t">
              <Button
                variant="outline"
                onClick={() => router.push('/login')}
                className="mr-4"
              >
                切换用户登录
              </Button>
              <Button
                variant="outline"
                onClick={() => router.push('/piping')}
              >
                返回配管专业页面
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
